<template>
  <div class="yun-form">
    <el-form size="mini" label-width="100px" label-position="left">
      <el-form-item label="背景色：">
        <el-color-picker
          v-model="option.background"
          show-alpha
        ></el-color-picker>
      </el-form-item>
      <el-collapse :accordion='true'>
        <el-collapse-item name="title" title="标题">
          <el-form-item label="标题：">
            <el-input v-model="option.title.text"></el-input>
          </el-form-item>
          <el-form-item label="是否显示：">
            <el-switch v-model="option.title.show"></el-switch>
          </el-form-item>
          <el-form-item label="文字颜色：">
            <el-color-picker
              v-model="option.title.textStyle.color"
              show-alpha
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="文字大小：">
            <el-input v-model="option.title.textStyle.fontSize"></el-input>
          </el-form-item>
          <el-form-item label="top：">
            <el-input v-model="option.title.top"></el-input>
          </el-form-item>
          <el-form-item label="left：">
            <el-input v-model="option.title.left"></el-input>
          </el-form-item>
          <el-form-item label="right：">
            <el-input v-model="option.title.right"></el-input>
          </el-form-item>
          <el-form-item label="bottom：">
            <el-input v-model="option.title.bottom"></el-input>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="tooltip" title="提示框">
          <el-form-item label="是否显示：">
            <el-switch v-model="option.tooltip.show"></el-switch>
          </el-form-item>
          <el-form-item label="类型：">
            <el-select v-model="option.tooltip.trigger">
              <el-option value="axis">axis</el-option>
              <el-option value="item">item</el-option>
              <el-option value="none">none</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="背景颜色：">
            <el-color-picker
              v-model="option.tooltip.backgroundColor"
              show-alpha
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="文字大小：">
            <el-input v-model="option.tooltip.textStyle.fontSize"></el-input>
          </el-form-item>
           <el-form-item label="文字颜色：">
            <el-color-picker
              v-model="option.tooltip.textStyle.color"
              show-alpha
            ></el-color-picker>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="legend" title="图例">
          <el-form-item label="是否显示：">
            <el-switch v-model="option.legend.show"></el-switch>
          </el-form-item>
          <el-form-item label="top：">
            <el-input v-model="option.legend.top"></el-input>
          </el-form-item>
          <el-form-item label="left：">
            <el-input v-model="option.legend.left"></el-input>
          </el-form-item>
          <el-form-item label="right：">
            <el-input v-model="option.legend.right"></el-input>
          </el-form-item>
          <el-form-item label="bottom：">
            <el-input v-model="option.legend.bottom"></el-input>
          </el-form-item>
          <el-form-item label="排列方式：">
            <el-select v-model="option.title.orient">
              <el-option value="horizontal">horizontal</el-option>
              <el-option value="vertical">vertical</el-option>
            </el-select>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="grid" title="网格">
          <el-form-item label="top：">
            <el-input v-model="option.grid.top"></el-input>
          </el-form-item>
          <el-form-item label="left：">
            <el-input v-model="option.grid.left"></el-input>
          </el-form-item>
          <el-form-item label="right：">
            <el-input v-model="option.grid.right"></el-input>
          </el-form-item>
          <el-form-item label="bottom：">
            <el-input v-model="option.grid.bottom"></el-input>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="xAxis" title="X轴">
          <el-form-item label="是否显示：">
            <el-switch v-model="option.xAxis.show"></el-switch>
          </el-form-item>
          <el-form-item label="轴类型:">
            <el-select v-model="option.xAxis.type">
              <el-option value="category">category</el-option>
              <el-option value="value">value</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="轴称：">
            <el-input v-model="option.xAxis.name"></el-input>
          </el-form-item>
          <el-form-item label="轴称文字颜色：">
            <el-color-picker
              v-model="option.xAxis.nameTextStyle.color"
              show-alpha
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="轴称文字大小：">
            <el-input v-model="option.xAxis.nameTextStyle.fontSize"></el-input>
          </el-form-item>
          <el-form-item label="轴名称位置:">
            <el-select v-model="option.xAxis.nameLocation">
              <el-option value="start">start</el-option>
              <el-option value="center">center</el-option>
              <el-option value="end">end</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="轴线是否显示：">
            <el-switch v-model="option.xAxis.axisLine.show"></el-switch>
          </el-form-item>
          <el-form-item label="轴线颜色：">
            <el-color-picker
              v-model="option.xAxis.axisLine.lineStyle.color"
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="轴线宽度：">
            <el-slider
              v-model="option.xAxis.axisLine.lineStyle.width"
              :step="1"
              :max="10"
            ></el-slider>
          </el-form-item>
          <el-form-item label="轴线透明度：">
            <el-slider
              v-model="option.xAxis.axisLine.lineStyle.opacity"
              :step="0.1"
              :max="1"
            ></el-slider>
          </el-form-item>
          <el-form-item label="轴刻度是否显示：">
            <el-switch v-model="option.xAxis.axisTick.show"></el-switch>
          </el-form-item>
          <el-form-item label="轴刻度内外：">
            <el-switch v-model="option.xAxis.axisTick.inside"></el-switch>
          </el-form-item>
          <el-form-item label="轴刻度长度：">
            <el-slider
              v-model="option.xAxis.axisTick.length"
              :step="1"
              :max="10"
            ></el-slider>
          </el-form-item>
          <el-form-item label="轴刻度颜色：">
            <el-color-picker
              v-model="option.xAxis.axisTick.lineStyle.color"
              show-alpha
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="轴刻度宽度：">
            <el-slider
              v-model="option.xAxis.axisTick.lineStyle.width"
              :step="1"
              :max="10"
            ></el-slider>
          </el-form-item>
          <el-form-item label="轴刻度透明度：">
            <el-slider
              v-model="option.xAxis.axisTick.lineStyle.opacity"
              :step="0.1"
              :max="1"
            ></el-slider>
          </el-form-item>
          <el-form-item label="轴标签显示：">
            <el-switch v-model="option.xAxis.axisLabel.show"></el-switch>
          </el-form-item>
          <el-form-item label="轴标签内外：">
            <el-switch v-model="option.xAxis.axisLabel.inside"></el-switch>
          </el-form-item>
          <el-form-item label="轴标签颜色：">
            <el-color-picker
              v-model="option.xAxis.axisLabel.color"
              show-alpha
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="轴标签文字大小：">
            <el-input v-model="option.xAxis.axisLabel.fontSize"></el-input>
          </el-form-item>
          <el-form-item label="轴标签旋转：">
            <el-slider
              v-model="option.xAxis.axisLabel.rotate"
              :step="1"
              :max="90"
              :min="-90"
            ></el-slider>
          </el-form-item>
          <el-form-item label="轴标签距离：">
            <el-slider
              v-model="option.xAxis.axisLabel.margin"
              :step="1"
              :max="15"
            ></el-slider>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="yAxis" title="Y轴">
          <el-form-item label="是否显示：">
            <el-switch v-model="option.yAxis.show"></el-switch>
          </el-form-item>
          <el-form-item label="轴类型:">
            <el-select v-model="option.yAxis.type">
              <el-option value="category">category</el-option>
              <el-option value="value">value</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="轴称：">
            <el-input v-model="option.xAxis.name"></el-input>
          </el-form-item>
          <el-form-item label="轴称文字颜色：">
            <el-color-picker
              v-model="option.xAxis.nameTextStyle.color"
              show-alpha
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="轴称文字大小：">
            <el-input v-model="option.yAxis.nameTextStyle.fontSize"></el-input>
          </el-form-item>
          <el-form-item label="轴名称位置:">
            <el-select v-model="option.yAxis.nameLocation">
              <el-option value="start">start</el-option>
              <el-option value="center">center</el-option>
              <el-option value="end">end</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="轴线是否显示：">
            <el-switch v-model="option.yAxis.axisLine.show"></el-switch>
          </el-form-item>
          <el-form-item label="轴线颜色：">
            <el-color-picker
              v-model="option.yAxis.axisLine.lineStyle.color"
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="轴线宽度：">
            <el-slider
              v-model="option.yAxis.axisLine.lineStyle.width"
              :step="1"
              :max="10"
            ></el-slider>
          </el-form-item>
          <el-form-item label="轴线透明度：">
            <el-slider
              v-model="option.yAxis.axisLine.lineStyle.opacity"
              :step="0.1"
              :max="1"
            ></el-slider>
          </el-form-item>
          <el-form-item label="轴刻度是否显示：">
            <el-switch v-model="option.yAxis.axisTick.show"></el-switch>
          </el-form-item>
          <el-form-item label="轴刻度内外：">
            <el-switch v-model="option.yAxis.axisTick.inside"></el-switch>
          </el-form-item>
          <el-form-item label="轴刻度长度：">
            <el-slider
              v-model="option.yAxis.axisTick.length"
              :step="1"
              :max="10"
            ></el-slider>
          </el-form-item>
          <el-form-item label="轴刻度颜色：">
            <el-color-picker
              v-model="option.yAxis.axisTick.lineStyle.color"
              show-alpha
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="轴刻度宽度：">
            <el-slider
              v-model="option.yAxis.axisTick.lineStyle.width"
              :step="1"
              :max="10"
            ></el-slider>
          </el-form-item>
          <el-form-item label="轴刻度透明度：">
            <el-slider
              v-model="option.yAxis.axisTick.lineStyle.opacity"
              :step="0.1"
              :max="1"
            ></el-slider>
          </el-form-item>
          <el-form-item label="轴标签显示：">
            <el-switch v-model="option.yAxis.axisLabel.show"></el-switch>
          </el-form-item>
          <el-form-item label="轴标签内外：">
            <el-switch v-model="option.yAxis.axisLabel.inside"></el-switch>
          </el-form-item>
          <el-form-item label="轴标签颜色：">
            <el-color-picker
              v-model="option.yAxis.axisLabel.color"
              show-alpha
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="轴标签文字大小：">
            <el-input v-model="option.yAxis.axisLabel.fontSize"></el-input>
          </el-form-item>
          <el-form-item label="轴标签旋转：">
            <el-slider
              v-model="option.yAxis.axisLabel.rotate"
              :step="1"
              :max="90"
              :min="-90"
            ></el-slider>
          </el-form-item>
          <el-form-item label="轴标签距离：">
            <el-slider
              v-model="option.yAxis.axisLabel.margin"
              :step="1"
              :max="15"
            ></el-slider>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="series" title="数据样式">
          <el-form-item label="是否堆叠：">
            <el-switch v-model="option.stackFlage"></el-switch>
          </el-form-item>
          <el-form-item label="堆叠名称：">
            <el-input v-model="option.stack"></el-input>
          </el-form-item>
          <el-form-item label="标记图形：">
            <el-select v-model="option.symbol">
              <el-option value="circle">circle</el-option>
              <el-option value="rect">rect</el-option>
              <el-option value="roundRect">roundRect</el-option>
              <el-option value="arrow">arrow</el-option>
              <el-option value="none">none</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="标记大小：">
            <el-slider
              v-model="option.symbolSize"
              :step="1"
              :max="10"
            ></el-slider>
          </el-form-item>
          <el-form-item label="数据显示：">
            <el-switch v-model="option.label.show"></el-switch>
          </el-form-item>
          <el-form-item label="数据文字颜色：">
            <el-color-picker
              v-model="option.label.color"
              show-alpha
            ></el-color-picker>
          </el-form-item>
          <el-form-item label="数据文字大小：">
            <el-input v-model="option.label.fontSize"></el-input>
          </el-form-item>
          <el-form-item label="数据文字位置：">
            <el-select v-model="option.label.position">
              <el-option value="top">top</el-option>
              <el-option value="bottom">bottom</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否平滑曲线：">
            <el-switch v-model="option.smooth"></el-switch>
          </el-form-item>
          <el-form-item label="是否面显示：">
            <el-switch v-model="option.areaFlag"></el-switch>
          </el-form-item>
          <el-form-item label="面透明度：">
            <el-slider
              v-model="option.areaStyle.opctiy"
              :step="0.1"
              :max="1"
            ></el-slider>
          </el-form-item>
          <el-form-item label="线条宽度">
              <el-slider
              v-model="option.lineStyle.width"
              :step="1"
              :max="10"
            ></el-slider>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="color" title="自定义颜色">
          <el-form-item v-for='(item,index) in option.color' :key='index' :label="'颜色'+index">
              <div class='color-item'>
                   <el-color-picker
                    v-model="option.color[index]"
                    show-alpha
                    ></el-color-picker> 
                    <el-button type="danger" class='delecteColor' icon="el-icon-delete" circle @click='deleteColorEevnt(index)'></el-button>
              </div>
          </el-form-item>
          <el-form-item>
              <el-button type="primary" @click='addColorEvent'>新增</el-button>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="data" title="数据源">
            <el-form-item label="数据来源：">
                <el-select v-model="option.dataSource">
                <el-option value="json">json</el-option>
                <el-option value="api">api</el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="JSON数据：" v-if='option.dataSource=="json"'>
                <el-input type='textarea' v-model='option.dataJson'></el-input>
            </el-form-item>
            <el-form-item label="API地址：" v-if='option.dataSource=="api"'>
                <el-input type='text' v-model='option.apiUrl'></el-input>
            </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>
<script>
export default {
  props: {
    option: Object,
  },
  data() {
    return {};
  },
  methods: {
      deleteColorEevnt(index){
          this.option.color.splice(index,1)
      },
      addColorEvent(){
          this.option.color.push('#409EFF')
      }
  },
};
</script>

<style scoped lang="less">
.yun-form {
  width: 100%;
  /deep/.el-form-item__label {
    color: #fff;
    font-size: 12px;
  }
  .color-item{
      display: flex;
      align-items: center;
      .delecteColor{
          margin-left:20px;
      }
  }
  /deep/.el-collapse {
    border-top: 1px solid #616060;
    border-bottom: 1px solid #616060;
    .el-collapse-item__header {
      height: 32px;
      line-height: 32px;
      background-color: transparent;
      border: 0;
      color: #f5f0f0;
    }
    .el-collapse-item__wrap {
      background-color: transparent;
      border-bottom: 1px solid #616060;
    }
    .el-collapse-item__content {
      padding-bottom: 0;
      max-height: 40vh;
      overflow-y: auto;
      overflow-x: hidden;
    }
  }
  .el-form-item--mini.el-form-item,
  .el-form-item--small.el-form-item {
    margin-bottom: 10px;
  }
}
</style>
